<template>
  <view
    class="header"
    :class="{ 'show-header-bg': showBg }"
    :style="{
      height: navbarConfig.topIconDistance + 'px',
      paddingTop: navbarConfig.navBarHeight + 'px',
    }"
  >
    <view
      class="content"
      :style="{
        height: navbarConfig.topIconDistance + 'px',
        paddingTop: navbarConfig.navBarHeight + 'px',
      }"
    >
      <img class="logo" src="/static/logo.png" alt="" />
      <view class="title">校易达</view>
      <view class="placeholder"></view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { getNavbarConfig } from "@/utils/uniUtils";
import { onPageScroll } from "@dcloudio/uni-app";
import { ref } from "vue";

const navbarConfig = getNavbarConfig();

const showBg = ref(false);

onPageScroll((e) => {
  const navbarHeight = navbarConfig.topIconDistance;
  const scrollTop = e.scrollTop;
  if (scrollTop > navbarHeight) {
    showBg.value = true;
  } else {
    showBg.value = false;
  }
});
</script>
<style lang="scss" scoped>
.header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  // background-color: #fff;

  .content {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 30rpx;

    .logo {
      width: 65rpx;
      height: 65rpx;
    }
    .title {
      color: #fff;
      // color: #222;
      font-size: 32rpx;
      text-align: center;
      // font-weight: bold;
    }
    .placeholder {
      width: 65rpx;
      height: 65rpx;
    }
  }
}

.show-header-bg {
  background-color: #fff;
}
</style>
